<template>
	<view class="content">
		<view class="box1">
			<view class="box1-1">
				<image class="box-1-img" mode="aspectFill" src="../../static/img/R-8.jpg"></image>
			<view @click="gologin" class="text1">
				还未登录？点击立即登录
			</view>
			</view>
		</view>
		<view class="text">我的订单</view>
		<view class="box2">
			<view class="box2-item">
				<image class="box2-img" src="../../static/iconfont/9.png">预约中</image>
			</view>
			<view class="box2-item">
				<image class="box2-img" src="../../static/iconfont/11.png">进行中</image>
			</view>
			<view class="box2-item">
				<image class="box2-img" src="../../static/iconfont/10.png">已完成</image>
			</view>
		</view>
		<view class="box3">
			<view class="box3-1">
				<image class="box3-img" src="../../static/iconfont/4.png">我的账户</image>
			</view>
			<view class="box3-2">
				<image class="box3-img" src="../../static/iconfont/12.png">身份认证</image>
			</view>
			<view class="box3-2">
				<image class="box3-img" src="../../static/iconfont/15.png">设置</image>
			</view>
			<view class="box3-2">
				<image class="box3-img" src="../../static/iconfont/14.png">意见反馈</image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
			},
			methods: {
				gologin(){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
			}
		
	}
</script>

<style lang="scss" scopeds>
	.content {
		max-width: 600px;
		padding: 0 10px;
		background-color: rgb(247, 247, 247);
	}

	.box1 {
		height: 100px;
		background-color: #FFFFFF;
	}

	.box1 .box1-1 {
		display: flex;
		position: relative;
		top: 50%;
		margin: 0 auto;
		width: 90%;
		background-color: white;
		height: 50px;
		border-radius: 10px;
	}
	.box1 .box-1-img{
		top:-40%;
		position: relative;
		width: 60px;
		height: 50px;
	}
	.box1 .text1{
		font-size: 18px;
		font-weight: bold;
	}
	.text{
		padding-top: 10px;
		font-size: 18px;
	}

	.box2 {
		margin-top: 20px;
		height: 116px;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		text-align: center;
	}

	.box2 .box2-text {
		font-size: 16px;
		height: 30%;
	}

	.box2 .box2-item {

		height: 70%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.box2-img {
		display: flex;
		padding-top: 15px;
		width: 30px;
		height: 30px;
	}

	.box3 {
		margin-top: 20px;
		height: 400px;

	}

	.box3-1 {
		font-size: 16px;
		line-height: 60px;
		
		display: flex;
		margin: 0 auto;
		width: 90%;
		background-color: white;
		height: 54px;
		border-radius: 5px;

	}

	.box3-2 {
		font-size: 16px;
		line-height: 60px;
		display: flex;
		margin: 0 auto;
		width: 90%;
		background-color: white;
		height: 64px;
		border-radius: 5px;
		margin-top: 10px;
	}

	.box3 .box3-img {
		display: flex;
		padding-top: 15px;
		width: 25px;
		height: 25px;
	}
</style>